<template>
  <view class="page-wrapper page-space">
    <uni-forms ref="formRef" v-bind="formProps" :model="model">
      <view class="id-info">
        <uni-forms-item label="头像" name="avatar" required :rules="[{ required: true, errorMessage: '请上传头像' }]">
          <lg-uploader v-model="model.avatar" :count="1" value-type="url" />
        </uni-forms-item>
        <uni-forms-item label="姓名" name="name" required :rules="[{ required: true, errorMessage: '请输入姓名' }]">
          <uni-easyinput v-model="model.name" placeholder="请输入姓名" :inputBorder="false"/>
        </uni-forms-item>
        <uni-forms-item label="性别" name="sex" required :rules="[{ required: true, errorMessage: '请选择性别' }]">
          <view class="gl-flex">
            <label v-for="(l, v) in sex" :key="v" @click="model.sex = v" class="gl-flex-item">
              <radio :value="v" :checked="model.sex === v" @click="model.sex = v" />
              {{ l }}
            </label>
          </view>
        </uni-forms-item>
        <uni-forms-item label="年龄" name="age" required :rules="[{ required: true, errorMessage: '请输入年龄' }]">
          <uni-easyinput type="number" v-model="model.age" placeholder="请输入年龄" :inputBorder="false"/>
        </uni-forms-item>
        <uni-forms-item label="身份证号码" name="idcard" label-width="7em">
          <uni-easyinput v-model="model.idcard" placeholder="请输入身份证号码" :inputBorder="false"/>
        </uni-forms-item>
        <uni-forms-item label="电话" name="phone">
          <uni-easyinput v-model="model.phone" placeholder="请输入电话" :inputBorder="false"/>
        </uni-forms-item>
        <uni-forms-item label="QQ" name="qq">
          <uni-easyinput v-model="model.qq" placeholder="请输入QQ" :inputBorder="false"/>
        </uni-forms-item>
        <button type="primary" @click="onSubmit" :loading="loading" :disabled="loading">提交</button>
      </view>
    </uni-forms>
  </view>
</template>

<script lang="ts" setup>
import {useForm} from '@/soar/hooks/page';
import api, {sex} from "@/demo/crud/api";
import UniForms from "@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import LgUploader from "@/soar/components/lg-uploader/index.vue";
import {mustLogin} from "@/store/account";
import {ref} from "vue";

mustLogin()

const formRef = ref();
const { back, model, formProps, onSubmitAfter, loading, onSubmit } = useForm({
	api,
  formRef
})
</script>

<style lang="scss">
</style>